import React, { Component } from 'react';

export default class Toggle extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: true,
            isToggleOn2: false
        }

        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }))
    }

    handleClick2() {
        this.setState(prevState => ({
            isToggleOn2: !prevState.isToggleOn2
        }))
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick} >
                    { this.state.isToggleOn ? 'ON' : 'OFF' }
                </button> 
                <button onClick={() => this.handleClick2()} >
                    { this.state.isToggleOn2 ? 'ON' : 'OFF' }
                </button>
            </div>
        )
    }
}
